<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
		<style type="text/css">
			body{
				margin: 0 auto;
				padding: 0;
				height: 2000px;
			}
			.toTOP{
				width: 60px;
				height: 60px;
				background-color: black;
				color: white;
				font-size: 20px;
				line-height: 60px;
				text-align: center;
				position: fixed;
				right: 0;
				bottom: 100px;
				cursor: pointer;
			}
			.pic{
				margin: 0 auto;
				text-align: center;
				width: 1060px;
				height: 415px;
				border-radius: 5px;
				overflow: hidden;
				transition:all 2s;
			}
			.pic1{
				height: 0;
			}
			.pic img{
				width: 100%;
			}
			.button{
				text-align: center;
				margin: 0 auto;
				width: 1060px;
			}
			button{
				border-radius: 5px;
				background-color: pink;
				width: 200px;
				height: 50px;
				font-size: 25px;
				line-height: 50px;
				color: white;
				outline: none;
			}
			.option{
				text-align: center;
			}
			.btn{
				background: white;
				color: black;
				border: none;
				border-bottom: none;
				border-radius: 5px 5px 0 0;
			}
			.btn1{
				position: relative;
				top: 2px;
				z-index: 1;
				border: 1px solid pink;
				border-bottom: none;
			}
			.first{
				margin: 0 auto;
				width: 608px;
				border: 1px solid pink;
				border-radius: 0 0 5px 5px;
			}
			.second{
				margin: 0 auto;
				width: 608px;
				border: 1px solid pink;
				display: none;
				border-radius: 0 0 5px 5px;
			}
			.third{
				margin: 0 auto;
				width: 608px;
				border: 1px solid pink;
				display: none;
				border-radius: 0 0 5px 5px;
			}
		</style>
	</head>
	<body>
		<div class="toTOP">TOP</div>
		<div class="pic">
			<img src="img/living.jpg"/>
		</div>
		<div class="button">
			<button id="down">slide down</button>
			<button id="up">slide up</button>
			<button id="toggle">slide toggle</button>
		</div>
		<br />
		<div class="option">
			<button class="btn btn1" id="first">静夜思</button>
			<button class="btn" id="second">春晓</button>
			<button class="btn" id="third">终南望余雪</button>
			<div class="first">
				<h4>静夜思</h4>
				<p>李白</p>
				<p>床前明月光，</p>
				<p>疑是地上霜。</p>
				<p>举头望明月，</p>
				<p>低头思故乡。</p>
			</div>
			<div class="second">
				<h4>春晓</h4>
				<p>孟浩然</p>
				<p>春眠不觉晓，</p>
				<p>处处闻啼鸟。</p>
				<p>夜来风雨声，</p>
				<p>花落知多少。</p>
			</div>
			<div class="third">
				<h4>终南望余雪</h4>
				<p>祖咏</p>
				<p>终南阴岭秀，</p>
				<p>积雪浮云端。</p>
				<p>林表明霁色，</p>
				<p>城中增暮寒。</p>
			</div>
		</div>
		
		<script type="text/javascript">
			var top = document.querySelector(".toTOP");
			top.addEventListener("click",function(){
				top.scrollTo(0,0);
			})
			
			var down = document.querySelector("#down");
			down.addEventListener("click",function(){
				var pic = document.querySelector(".pic");
				pic.classList.add("pic1");
			})
			
			var up = document.querySelector("#up");
			up.addEventListener("click",function(){
				var pic = document.querySelector(".pic");
				pic.classList.remove("pic1");
			})
			
			var toggle = document.querySelector("#toggle");
			toggle.addEventListener("click",function(){
				var pic = document.querySelector(".pic");
				pic.classList.toggle("pic1");
			})
			
			var first = document.querySelector("#first");
			var second = document.querySelector("#second");
			var third = document.querySelector("#third");
			var firstContent = document.querySelector(".first");
			var secondContent = document.querySelector(".second");
			var thirdContent = document.querySelector(".third");
			first.addEventListener("click",function(){
				first.classList.add("btn1");
				second.classList.remove("btn1");
				third.classList.remove("btn1");
				firstContent.style.display = "block";
				secondContent.style.display = "none";
				thirdContent.style.display = "none";
			})
			second.addEventListener("click",function(){
				first.classList.remove("btn1");
				second.classList.add("btn1");
				third.classList.remove("btn1");
				firstContent.style.display = "none";
				secondContent.style.display = "block";
				thirdContent.style.display = "none";
			})
			third.addEventListener("click",function(){
				first.classList.remove("btn1");
				second.classList.remove("btn1");
				third.classList.add("btn1");
				firstContent.style.display = "none";
				secondContent.style.display = "none";
				thirdContent.style.display = "block";
			})
			
		</script>
	</body>
</html>
